<!--
 * @Description  : 表格
 * @Author       : zhao
 * @Date         : 2022-07-11 14:38:25
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-04 09:50:19
-->
<template>
	<div class="table">

		<div v-if="useTableInfos.zTableType.menu">
			<el-menu :default-active="activeIndex" background-color="#fff" mode="horizontal" @select="handleSelect">
				<el-menu-item :index="'menu' + index" v-for="(m, index) in useTableInfos.zTable.menuData"
					:key="index + 'menu'">{{
							m.name
					}}
				</el-menu-item>

			</el-menu>
		</div>
		<el-table :data="usetableData.value" style="width: 100%" :border="useTableInfos.zTableType.border"
			@cell-dblclick="handcelldblclick" @selection-change="handleSelectionChange" @row-click="hankdRowClick">
			<el-table-column type="selection" width="55" v-if="useTableInfos.zTableType.selection" />
			<el-table-column type="index" width="70" label="序号" v-if="useTableInfos.zTableType.index"></el-table-column>
			<template v-for="(i, index) in usetableHeader.value" :key="'table'+index">


				<el-table-column :prop="i.prop" :label="i.label" :width="i.width" :fixed="i.fixed" show-overflow-tooltip
					min-width="130">
					<template #default="scope">

						<div v-if="i.type === 'button'">

							<span v-for="(s, buttonIndex) in i.options" :key="buttonIndex + 'button'"
								@click.native.prevent.stop="">
								<span v-if="s.type == 'danger'">
									<el-popconfirm title="确定删除此数据吗？" confirm-button-text="删除" cancel-button-text="取消"
										icon="el-icon-info" icon-color="red" confirm-button-type="danger "
										@confirm="Empty(scope.row)">
										<template #reference>
											<el-button link size="small" class="danger" type="danger">删除</el-button>
										</template>

									</el-popconfirm>
								</span>
								<el-button v-else @click.native.prevent.stop="deleteRow(s.name, scope.row)" type="text"
									 size="small"
									:disabled="tableButtomDisabled(s.name, scope.row)">
									{{ s.name }}
								</el-button>

							</span>
						</div>
						<template v-else>

							<el-input v-model="noteData.note" v-if="edit && i.prop == 'FileNamess'"
								placeholder="请输入附注" />

							<span v-else>{{ scope.row[i.prop] }} </span>
						</template>

					</template>
				</el-table-column>>
			</template>

		</el-table>
	</div>
</template>

<script setup lang='ts'>
import { ref, toRef, toRefs, reactive, watch } from 'vue';
import { useTableInfo } from '/@/stores/ztable'

import { useUserInfo } from '/@/stores/userInfo'
import { usePublicity } from '/@/stores/publicity'
import { useUpdataMaintain } from '/@/stores/updataMaintain'
import { useBorrow } from '/@/stores/borrow'
import { toRaw } from '@vue/reactivity'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const props = defineProps({
	tableHeader: Array<any>,

	edit: Boolean
})
const { tableHeader, edit } = toRefs(props)

const useTableInfos = useTableInfo()
const { PublishNotice, RevokeNotice } = usePublicity()
const { DeleteArchiveDataList } = useUpdataMaintain()

const { CSGetBorrowingFormBtnFinish } = useBorrow()
const { passwordRecord, DeleteSysUser } = useUserInfo()
let usetableData: any = reactive({
	value: [],
})
let usetableHeader: any = reactive({
	value: [],
})
usetableHeader.value = props.tableHeader

const router = useRouter()



//菜单
let activeIndex = ref("menu0")
let handleSelect: any = null

if (useTableInfos.zTableType.menu) {
	if (useTableInfos.zTable.mdName.name == "useBorrow") {
		activeIndex.value = useTableInfos.menuType.activeIndex
		// useTableInfos.zTableType.border = true
		handleSelect = async (key: string, keyPath: string[]) => {

			useTableInfos.menuType.activeIndex = key
			activeIndex.value = key
			const searchdata = {
				pageSize: 10,
				pageIndex: 1,
			}

			switch (key) {
				case ("menu0"):
					usetableData.value = []
					// usetableHeader.value[usetableHeader.value.length - 1].options = [
					// 	{ name: '详情' },
					// ]
					usetableHeader.value = []
					usetableHeader.value[0] = { prop: 'tableNo', label: '申请单号', width: '' }
					usetableHeader.value[1] = { prop: 'applicationTime', label: '申请日期', width: '' }
					usetableHeader.value[2] = { prop: 'snNos', label: '档号', width: '' }
					usetableHeader.value[3] = { prop: 'fileNumber', label: '文件数量', width: '' }
					usetableHeader.value[4] = { prop: 'reviewComments', label: '审核意见', width: '' }
					usetableHeader.value[5] = { prop: 'state', label: '审核状态', width: '' }
					usetableHeader.value[6] = {
						label: '操作', width: '160', type: 'button', options: [
							{ name: '详情' },
						]
					}

					useTableInfos.zTable.mdName.name = "useBorrow"
					useTableInfos.zTable.mdName.url = "CSGetBorrowingForm"
					await useTableInfos.getTableData()
					break;
				case ("menu1"):
					usetableData.value = []
					usetableHeader.value = []

					usetableHeader.value[0] = { prop: 'tableNo', label: '申请单号', width: '' }
					usetableHeader.value[1] = { prop: 'uploadTime', label: '审批日期', width: '' }
					usetableHeader.value[2] = { prop: 'snNos', label: '档号', width: '' }
					usetableHeader.value[3] = { prop: 'state', label: '审核结果', width: '' }
					usetableHeader.value[4] = { prop: 'reviewComments', label: '审核意见', width: '' }
					usetableHeader.value[5] = { prop: 'checkerName', label: '审核人', width: '' }
					usetableHeader.value[6] = {
						label: '操作', width: '160', type: 'button', options: [
							{ name: '详情' },
							{ name: '完成' },
						]
					}


					useTableInfos.zTable.mdName.name = "useBorrow"
					useTableInfos.zTable.mdName.url = "CSGetBorrowingFormNoApproved"
					await useTableInfos.getTableData()
					break;
				case ("menu2"):

					usetableData.value = []
					usetableHeader.value = []
					usetableHeader.value[0] = { prop: 'tableNoOld', label: '申请单号', width: '' }
					usetableHeader.value[1] = { prop: 'uploadTime', label: '审批日期', width: '' }
					usetableHeader.value[2] = { prop: 'snNos', label: '档号', width: '' }
					usetableHeader.value[3] = { prop: 'state', label: '审核结果', width: '' }
					usetableHeader.value[4] = { prop: 'reviewComments', label: '审核意见', width: '' }
					usetableHeader.value[5] = { prop: 'checkerName', label: '审核人', width: '' }
					// usetableHeader.value[6] = { prop: 'uploadTime', label: '领取时间', width: '' }
					// usetableHeader.value[7] = { prop: 'processorName', label: '经办人', width: '' }
					usetableHeader.value[6] = {
						label: '操作', width: '160', type: 'button', options: [
							{ name: '详情' },
						]
					}
					useTableInfos.zTable.mdName.name = "useBorrow"
					useTableInfos.zTable.mdName.url = "CSGetBorrowingFormReject"
					await useTableInfos.getTableData()

					break;
				case ("menu3"):
					usetableData.value = []
					usetableHeader.value = []
					usetableHeader.value[0] = { prop: 'tableNo', label: '申请单号', width: '' }
					usetableHeader.value[1] = { prop: 'uploadTime', label: '审批日期', width: '' }
					usetableHeader.value[2] = { prop: 'snNos', label: '档号', width: '' }
					usetableHeader.value[3] = { prop: 'state', label: '审核结果', width: '' }
					usetableHeader.value[4] = { prop: 'reviewComments', label: '审核意见', width: '' }
					usetableHeader.value[5] = { prop: 'checkerName', label: '审核人', width: '' }
					usetableHeader.value[6] = { prop: 'uploadTime', label: '领取时间', width: '' }
					usetableHeader.value[7] = { prop: 'processorName', label: '经办人', width: '' }
					usetableHeader.value[8] = {
						label: '操作', width: '160', type: 'button', options: [
							{ name: '详情' },
						]
					}
					useTableInfos.zTable.mdName.name = "useBorrow"
					useTableInfos.zTable.mdName.url = "CSGetBorrowingFormFinish"
					await useTableInfos.getTableData()
					break;
				case ("menu4"):
					usetableData.value = []
					usetableHeader.value = []
					usetableHeader.value = [
						{ prop: 'tableNo', label: '申请单号', width: '' },
						{ prop: 'uploadTime', label: '审批日期', width: '' },
						{ prop: 'snNos', label: '档号', width: '' },
						{ prop: 'state', label: '审核结果', width: '' },
						{ prop: 'reviewComments', label: '审核意见', width: '' },
						{ prop: 'checkerName', label: '审核人', width: '' },
						{
							label: '操作', width: '160', type: 'button', options: [
								{ name: '详情' },
								{ name: '完成' },
							]
						}
					]
					useTableInfos.zTable.mdName.name = "useBorrow"
					useTableInfos.zTable.mdName.url = "CSGetBorrowingFormOverdue"
					await useTableInfos.getTableData()
					break;

			}
			usetableData.value && usetableData.value.filter((e: any) => {
				if (e.state == "1") e.state = "待审核"
				if (e.state == "2") e.state = "已驳回"
				if (e.state == "3") e.state = "审核通过"
				if (e.state == "4") e.state = "已完成"
				if (e.state == "14") e.state = "已完成"
				if (e.state == "5") e.state = "已过期"

				// 	if (e.state == "1") e.state = "审核中"
				//   if (e.state == "2") e.state = "未通过"
				//   if (e.state == "3") e.state = "已通过"
				//   if (e.state == "4") e.state = "已完成"
			})
		}

	}
	if (useTableInfos.zTable.mdName.name == "useUpdataMaintain") {

		activeIndex.value = useTableInfos.menuType.activeIndex
		handleSelect = async (key: string, keyPath: string[]) => {

			if (key == "menu0") {
				useTableInfos.searchData.dataType = 1
				await useTableInfos.getTableData()
			}
			if (key == "menu1") {
				useTableInfos.searchData.dataType = 2
				await useTableInfos.getTableData()

			}
		}
	}
	handleSelect(useTableInfos.menuType.activeIndex, [useTableInfos.menuType.activeIndex])

} else {
	usetableData.value = []

}
useTableInfos.$subscribe((mutation: any, state) => {

	if (mutation.storeId == "zTable") usetableData.value = ref(useTableInfos.zTable.tableData)


	usetableData.value && usetableData.value.filter((e: any) => {
		if (e.state == "1") e.state = "待审核"
		if (e.state == "2") e.state = "已驳回"
		if (e.state == "3") e.state = "审核通过"
		if (e.state == "4") e.state = "已完成"
	})
})



//功能列
const deleteRow = async (name: string, row: any) => {

	if (name === "详情") {
		useTableInfos.zTable.rowData = toRaw(row)
		sessionStorage.setItem("rowdata", JSON.stringify(toRaw({ ...row, menuType: useTableInfos.menuType.activeIndex })))
		router.push({ path: useTableInfos.zTable.routerUrl })

	}
	if (name === "密码重置") {
		let obj = {
			id: row.id,
			userName: row.userName,
			phone: row.phone,
		}
		const res = await passwordRecord(obj)
		useTableInfos.getTableData()
		if (res.code == 200) ElMessage.success(res.msg || "重置成功")
		if (res.code != 200) ElMessage.error(res.msg || "重置失败")
	}
	if (name === "完成") {

		const Finishdata = await CSGetBorrowingFormBtnFinish({ tableNo: row.tableNo })
		if (Finishdata.code === 200) {
			ElMessage.success(Finishdata.msg || "提交成功")
			// handleSelect('menu1', ['menu1'])
			handleSelect('menu3', ['menu3'])
		} else {
			ElMessage.error(Finishdata.msg || "提交失败")
		}

	}
	if (name == "发布") {
		const { code, msg } = await PublishNotice({ id: [row.id] })
		useTableInfos.getTableData()
	}
	if (name == "撤销") {
		const { code, msg } = await RevokeNotice({ id: [row.id] })
		useTableInfos.getTableData()
	}

}

//表格编辑
let noteData = reactive({ note: '', id: -1 })//附注

const handcelldblclick = (row: any, column: any, cell: any, event: any) => {
	// console.log(row, column, cell, event);
	const col = toRaw(column)
	const rows = toRaw(row)
	if (rows.state == "审核通过") {
		if (col.label == "附注") noteData.id = rows.id


	}
}


//选中表格
const handleSelectionChange = (val: any) => {

	useTableInfos.zTable.selectRows = val

}


//按钮禁用设置
const tableButtomDisabled = (val: any, row: any) => {
	if (val == "发布" || val == "撤销") {
		if (val != row.statusName) return true
		return false
	}
}

//删除
const Empty = async (row: any) => {

	if (useTableInfos.zTable.mdName.name == "useUserInfo") await DeleteSysUser([row.id])
	if (useTableInfos.zTable.mdName.name == "useUpdataMaintain") await DeleteArchiveDataList({ id: [row.id] })

	useTableInfos.getTableData()
}

const hankdRowClick = (row: any) => {
	useTableInfos.zTable.rowData = toRaw(row)
	sessionStorage.setItem("rowdata", JSON.stringify(toRaw({ ...row, menuType: useTableInfos.menuType.activeIndex })))
	router.push({ path: useTableInfos.zTable.routerUrl })
}


</script>
<style lang='scss' scoped>
.table {
	.el-menu {
		padding-bottom: 20px;
		min-width: 500px;

		.is-active {
			background-color: var(--el-color-primary-light-9) !important
		}

		.el-menu-item {
			&:hover {
				background-color: var(--el-color-primary-light-9)
			}
		}

	}

}

.danger {
	color: #fc4a4a;

	&:hover {
		color: #fc4a4a;

	}
}
</style>